<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>打卡</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/province.js"></script>
    <style>
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}

        .row .container1 ul{
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
        /* 省 */
        .row .right-body .province{
            width:90px;
            height:23px;
            margin-top:6px;
            border:1px solid #e2e2e2;
            font-size:14px;
            float:left;
            line-height:22px;
            margin-left: 26px;
            color:#a2a2a2;
        }
        .row .right-body .province .provincexs{
            float:left;
            padding-left:10px;
        }
        .row .right-body .province .dianprovince{
            width:22px;
            height:22px;
            display:block;
            float:right;
            background: url(http://localhost:9003/img/V.png) 0 0 no-repeat;
            cursor:pointer;
        }
        .row .right-body .province .quanprovince{
            width:90px;
            height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
            display:none;
            margin-left:-1px;
            border:1px solid #e2e2e2;
            border-top:none;
            border-right:none;
            background-color:#FFF;
        }

        .row .right-body .province ul{
            width:70px;
        }
        .row .right-body .province li:hover{
            background-color:#f1f1f1;
        }
        /* 市 */
        .row .right-body .city{
            width:90px;
            height:23px;
            margin-top:6px;
            border:1px solid #e2e2e2;
            font-size:14px;
            float:left;
            line-height:22px;
            margin-left:10px;
            color:#a2a2a2;
        }
        .row .right-body .city .cityxs{
            float:left;
            padding-left:10px;
        }
        .row .right-body .city .diancity{
            width:22px;
            height:22px;
            display:block;
            float:right;
            background: url(http://localhost:9003/img/V.png) 0 0 no-repeat;
            cursor:pointer;
        }
        .row .right-body .city .quancity{
            width:90px;
            height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
            display:none;
            margin-left:-1px;
            border:1px solid #e2e2e2;
            border-top:none;
            border-right:none;
            background-color:#FFF;
        }

        .row .right-body .city ul{
            width:70px;
        }
        .row .right-body .city li:hover{
            background-color:#f1f1f1;
        }
        /* 区 */
        .row .right-body .area{
            width:90px;
            height:23px;
            margin-top:6px;
            border:1px solid #e2e2e2;
            font-size:14px;
            float:left;
            line-height:22px;
            margin-left:10px;
            color:#a2a2a2;
        }
        .row .right-body .area .areaxs{
            float:left;
            padding-left:10px;
        }
        .row .right-body .area .dianarea{
            width:22px;
            height:22px;
            display:block;
            float:right;
            background: url(http://localhost:9003/img/V.png) 0 0 no-repeat;
            cursor:pointer;
        }
        .row .right-body .area .quanarea{
            width:90px;
            height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
            display:none;
            margin-left:-1px;
            border:1px solid #e2e2e2;
            border-top:none;
            border-right:none;
            background-color:#FFF;
        }
        .row .right-body .area .mousemove{
            display:none;
        }
        .row .right-body .area ul{
            width:70px;
        }
        .row .right-body .area li:hover{
            background-color:#f1f1f1;
        }
    </style>

    <script>
        $(function(){

            $("body").click(function(){//点击空白处隐藏，使用e.stopPropagation()阻止事件冒泡
                $(".quanprovince").hide();
                $(".quancity").hide();
                $(".quanarea").hide();
            });
            //下拉列表获取地址
            var strSHENG = document.querySelector('.ulprovince').outerHTML;  //获取class为ulprovince的outerHTML
            var strSHI = document.querySelector('.ulcity').outerHTML;  //获取class为ulcity的outerHTML
            var strQU = document.querySelector('.ularea').outerHTML;  //获取class为ulcity的outerHTML
            //从js库里得到所有的数据
            var sfgsmr = provinceList;
            var sfxz = 0;
            var csxz = 0;
            var qyxz = 0;
            /*省*/
            document.querySelector('.dianprovince').onclick=function(e){
                document.querySelector('.quanprovince').style.display="block";//下拉窗口显示
                e.stopPropagation();
                var str = strSHENG.substring(0, strSHENG.length - 5);  //获取strSHENG的第0-第3个字节
                for (var i = 0; i < sfgsmr.length; i++) //
                {
                    str += "<li value='" + sfgsmr[i].name + "' style='padding-left:10px;'> " + sfgsmr[i].name + "</li>";  //创建li标签 把i值放进去
                }
                document.querySelector('.ulprovince').outerHTML = str +"</ul>";  //把li放进class为ulyear中
                var lis=document.querySelector('.ulprovince').getElementsByTagName('li'); //获取这里边的li标签
                for (var i=0;i<lis.length ;i++ )
                {
                    lis[i].onclick=function(){
                        for (var ii=0;ii<lis.length ;ii++ )
                        {
                            if (this == lis[ii])
                            {
                                document.querySelector('.provincexs').innerHTML=lis[ii].innerHTML; //li的内容赋给document.querySelector('.xs')
                                var sheng=lis[ii].getAttribute('value'); //获取点击的li的value属性值
                                document.querySelector('.provincexs').setAttribute("value",sheng); //设置document.querySelector('.xs')的value属性值yearvalue
                                document.querySelector('.quanprovince').style.display="none"; //窗口消失
                                var shi = provinceList[ii].cityList[0].name;
                                document.querySelector('.cityxs').innerHTML=shi;
                                var qu = provinceList[ii].cityList[0].areaList[0];
                                document.querySelector('.areaxs').innerHTML=qu;
                                return sfxz = sheng;//把选中的li的传参给省
                            }
                        }
                    }
                }
            }

            /*市*/
            var shiXb = 0;
            document.querySelector('.diancity').onclick=function(e){
                document.querySelector('.quancity').style.display="block";//下拉窗口显示
                e.stopPropagation();
                for(var i=0;i<sfgsmr.length ;i++){
                    if(provinceList[i].name == sfxz){
                        shiXb = i;
                        var str = strSHI.substring(0, strSHI.length - 5);
                        for(var j = 0; j<provinceList[i].cityList.length; j++){
                            str += "<li value='" + provinceList[i].cityList[j].name + "' style='padding-left:10px;'> " + provinceList[i].cityList[j].name + "</li>";
                        }
                        document.querySelector('.ulcity').outerHTML = str +"</ul>";
                        var lis=document.querySelector('.ulcity').getElementsByTagName('li');
                        for (var ii=0;ii<lis.length ;ii++ )
                        {
                            lis[ii].onclick=function(){
                                for (var jj=0; jj<lis.length; jj++)
                                {
                                    if (this == lis[jj])
                                    {
                                        document.querySelector('.cityxs').innerHTML=lis[jj].innerHTML;
                                        var shi=lis[jj].getAttribute('value');
                                        document.querySelector('.cityxs').setAttribute("value",shi);
                                        document.querySelector('.quancity').style.display="none";
                                        var qu = provinceList[shiXb].cityList[jj].areaList[0];
                                        document.querySelector('.areaxs').innerHTML=qu;
                                        return csxz = shi;//把选中的li的传参给市
                                    }
                                }
                            }
                        }
                    }
                }
            }
            /*区*/
            document.querySelector('.dianarea').onclick=function(e){
                document.querySelector('.quanarea').style.display="block";//下拉窗口显示
                e.stopPropagation();
                for(var i=0;i<sfgsmr.length;i++){
                    if(provinceList[i].name == sfxz){
                        for(var j=0;j<provinceList[i].cityList.length;j++){
                            if(provinceList[i].cityList[j].name == csxz){
                                var str = strQU.substring(0, strQU.length - 5);
                                for(var k = 0; k<provinceList[i].cityList[j].areaList.length; k++){
                                    str += "<li value='" + provinceList[i].cityList[j].areaList[k]+ "' style='padding-left:10px;'> " + provinceList[i].cityList[j].areaList[k] + "</li>";
                                }
                                document.querySelector('.ularea').outerHTML = str +"</ul>";
                                var lis=document.querySelector('.ularea').getElementsByTagName('li');
                                for (var ii=0;ii<lis.length ;ii++ )
                                {
                                    lis[ii].onclick=function(){
                                        for (var jj=0; jj<lis.length; jj++)
                                        {
                                            if (this == lis[jj])
                                            {
                                                document.querySelector('.areaxs').innerHTML=lis[jj].innerHTML;
                                                document.querySelector('.quancity').style.display="none";
                                                return qyxz = qu;//把选中的li的传参给区
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
    <script src="/js/jsa/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="/js/jsa/Area.js" type="text/javascript"></script>
    <script src="/js/jsa/AreaData_min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function (){
            initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
        });

        //得到地区码
        function getAreaID(){
            var area = 0;
            if($("#seachdistrict").val() != "0"){
                area = $("#seachdistrict").val();
            }else if ($("#seachcity").val() != "0"){
                area = $("#seachcity").val();
            }else{
                area = $("#seachprov").val();
            }
            return area;
        }

        function showAreaID() {
            //地区码
            var areaID = getAreaID();
            //地区名
            var areaName = getAreaNamebyID(areaID) ;
            $('#home').val(areaName)
        }

        //根据地区码查询地区名
        function getAreaNamebyID(areaID){
            var areaName = "";
            if(areaID.length == 2){
                areaName = area_array[areaID];
            }else if(areaID.length == 4){
                var index1 = areaID.substring(0, 2);
                areaName = area_array[index1] + " " + sub_array[index1][areaID];
            }else if(areaID.length == 6){
                var index1 = areaID.substring(0, 2);
                var index2 = areaID.substring(0, 4);
                areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
            }
            return areaName;
        }
    </script>
</head>

<body>
<div id="wrapper">
    <div style="margin-top: 0px;background-color: white">
        <img th:src="@{/img/yiqing.png}" style="width: 100%;height: 300px">
        <div style="width: 100%; height: 50px; text-align: center; color: red; font-size: 30px">
            <p>您已连续打卡[[${user.consecutiveDay}]]天</p>
        </div>
        <div style="width: 100%; height: 150px; text-align: center">
            高风险:
            <ul th:each="tx:${high}">
                <li style="display: inline" th:text="${tx.getDangerRegion()}"></li>
            </ul>
            中风险:
            <ul th:each="tf:${zhong}">
                <li style="display: inline" th:text="${tf.getDangerRegion()}"></li>
            </ul>
        </div>
        <li><a th:href="@{/logout}">安全退出</a>
    </div>
    <div class="row">
        <div class="col-sm-12">
                <div class="ibox-content">
                    <form id="form" action="/submitform" class="wizard-big" method="post">
                        <fieldset>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>学号 *</label>
                                        <input name="userId" type="text" class="form-control required" th:value="${user.getUserId()}"  onfocus="this.blur()">
                                    </div>
                                    <div class="form-group">
                                        <label>用户名 *</label>
                                        <input name="userName" type="text" th:value="${user.getUserName()}" class="form-control required" onfocus="this.blur()">
                                    </div>
                                    <div class="form-group">
                                        <label>手机 *</label>
                                        <input name="phone" type="text" class="form-control required" th:value="${user.getPhone()}" onfocus="this.blur()">
                                    </div>
                                    <div class="form-group">
                                        <label>身份证号 *</label>
                                        <input name="idCode" type="text" class="form-control required" th:value="${user.getIdCode()}" onfocus="this.blur()">
                                    </div>
                                    <div class="form-group">
                                        <label>户籍 *</label>
                                        <input name="nativePlace" type="text" th:value="${user.getNativePlace()}" class="form-control required" onfocus="this.blur()">
                                    </div>
                                    <div class="form-group">
                                        <label>家庭住址 *</label>
                                        <input name="homeAddress" type="text" th:value="${user.getHomeAddress()}" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>当前地址 *</label>
                                        <input id="home" name="dayAddress" type="text" class="form-control required" required onfocus="this.blur()">
                                        <select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
                                        <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
                                        <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
                                        <input type="button"  value="获取地区" onClick="showAreaID()"/>
                                    </div>
                                    <div class="form-group">
                                        <label>体温 *</label>
                                        <input name="temperature" type="text" class="form-control required" value="36.5" required pattern="[3-4][0-9].[0-9]">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary block full-width m-b" th:if="${if_clo}">打卡</button>
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/quanping.js"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="js/contabs.js"></script>

<!-- 第三方插件 -->
<script src="js/plugins/pace/pace.min.js"></script>

</body>

</html>
